"use client";

import { ReactNode } from "react";
import { useRouter, usePathname } from "next/navigation";
import AdminRoute from "@/app/components/auth/AdminRoute";
import { Bot, Brain, Settings, Users, Database, BarChart } from "lucide-react";

interface AdminLayoutProps {
  children: ReactNode;
}

// 定义导航项
const navItems = [
  {
    label: "大模型管理",
    href: "/admin/llm",
    icon: Bot
  },
  {
    label: "智能体管理",
    href: "/admin/agents",
    icon: Brain
  },
  {
    label: "用户管理",
    href: "/admin/users",
    icon: Users
  },
  {
    label: "系统设置",
    href: "/admin/settings",
    icon: Settings
  },
  {
    label: "数据管理",
    href: "/admin/data",
    icon: Database
  },
  {
    label: "统计分析",
    href: "/admin/analytics",
    icon: BarChart
  }
];

export default function AdminLayout({ children }: AdminLayoutProps) {
  const router = useRouter();
  const pathname = usePathname();

  return (
    <AdminRoute>
      <div className="flex h-[calc(100vh-64px)]">
        {/* 左侧导航栏 */}
        <div className="w-64 bg-white border-r border-gray-200 overflow-y-auto">
          <nav className="p-4 space-y-1">
            {navItems.map((item) => {
              const isActive = pathname === item.href;
              const Icon = item.icon;
              
              return (
                <button
                  key={item.href}
                  onClick={() => router.push(item.href)}
                  className={`w-full flex items-center px-4 py-3 text-sm rounded-lg transition-colors duration-200 ${
                    isActive
                      ? "bg-blue-50 text-blue-600"
                      : "text-gray-600 hover:bg-gray-50"
                  }`}
                >
                  <Icon size={20} className={`mr-3 ${isActive ? "text-blue-600" : "text-gray-400"}`} />
                  <span className={`font-medium ${isActive ? "text-blue-600" : "text-gray-600"}`}>
                    {item.label}
                  </span>
                </button>
              );
            })}
          </nav>
        </div>

        {/* 右侧内容区 */}
        <div className="flex-1 overflow-y-auto bg-gray-50">
          {children}
        </div>
      </div>
    </AdminRoute>
  );
} 